<template>
    <div class="app-container">
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-position="left">
            <el-form-item label="状态：" prop="state">
                <el-select v-model="queryParams.state" clearable style="width: 10rem;" @change="getList">
                    <el-option label="全部" value=""/>
                    <el-option v-for="item in nj_action_state" :key="item.value" :label="item.label"
                               :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="重点对象：" prop="peopleId">
                <keyPersonManageSelect v-model="queryParams.peopleId" style="width: 12rem" @change="getList"/>
            </el-form-item>
            <el-form-item label="预警时间：">
                <el-date-picker v-model="searchTime" end-placeholder="截止时间" range-separator="-" start-placeholder="开始时间"
                                type="daterange" value-format="YYYY-MM-DD" @change="changeDateTimerHandle"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">
                    <el-icon class="me-1">
                        <Search/>
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh/>
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-divider class="mt-0"/>

        <el-table v-loading="loading" :data="tableData" border stripe
        :row-style="tableRowStyle" @row-dblclick="handleDbClick">
            <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop"/>
            <el-table-column fixed="right" label="操作" width="280">
                <template #default="scope">
                    <!--                    <el-popconfirm-->
                    <!--                        confirm-button-text="确定"-->
                    <!--                        cancel-button-text="取消"-->
                    <!--                        icon-color="#626AEF"-->
                    <!--                        title="是否需要不处置?"-->
                    <!--                        @confirm="noDisposingHandle(scope.row)"-->
                    <!--                        :width="200"-->
                    <!--                        v-if="scope.row.state ==='0'"-->
                    <!--                    >-->
                    <!--                        <template #reference>-->
                    <!--                        </template>-->
                    <!--                    </el-popconfirm>-->
                    <el-button v-if="scope.row.state === '0'" link size="small" type="primary"
                               @click="noDisposingHandle(scope.row)">
                        <el-icon class="me-1">
                            <Lock/>
                        </el-icon>
                        不需处置
                    </el-button>


                    <el-button v-if="scope.row.state === '0'" link size="small"
                               type="primary"
                               @click="executeFireActionRef.showAddExecuteFireActionByEmergencyWarning(scope.row)">
                        <el-icon class="me-1">
                            <CirclePlus/>
                        </el-icon>
                        生成处置
                    </el-button>

                    <el-button link size="small" type="primary"
                               @click="fireAlertDetailRef.showFireAlertDetail(scope.row.warningId)">
                        <el-icon class="me-1">
                            <View/>
                        </el-icon>
                        详情
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
                    @pagination="getList"/>

        <AddEditExecuteFireAction ref="executeFireActionRef" @refresh-list="getList"/>
        <FireAlertDetail ref="fireAlertDetailRef"/>
    </div>
</template>

<script setup>
import {getCurrentInstance, useTemplateRef} from 'vue';
import {CirclePlus, Lock, Refresh, Search, View} from '@element-plus/icons-vue';
import {cancelEmergencyWarning, deleteEmergencyAction, getEmergencyWarningList} from '@/api/FireAction/FireAlert.js';
import AddEditExecuteFireAction from '@/components/ExecuteFireAction/AddEditExecuteFireAction.vue';
import {EarlyWarningEnum} from '@/enum/EarlyWarningEnum.js';
import KeyPersonManageSelect from '@/components/KeyPersonManageSelect/KeyPersonManageSelect.vue';
import {ElMessageBox} from 'element-plus';
import FireAlertDetail from '@/views/FireAction/FireAlert/components/FireAlertDetail.vue';
import PageEnum from '@/enum/PageEnum.js';


const {proxy} = getCurrentInstance();
const {
    nj_action_state
} = proxy.useDict('nj_action_state')

const total = ref(0)
const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const searchTime = ref([])
const queryParams = ref({
    // 状态
    state: '',
    // 重点对象
    peopleId: '',
    params: {
        'beginTime': '',
        'endTime': ''
    }
})

const tableColumn = [
    {label: '单位', prop: 'unitId'},
    {label: '位置', prop: 'place'},
    {label: '预警时间', prop: 'warningdate'},
    {label: '重点对象', prop: 'peopleName'},
    {label: '重点对象性别', prop: 'sexName'},
    {label: '预警级别', prop: 'warninglevel'},
    {label: '状态', prop: 'stateText'}
]

const tableData = ref([])
const queryParamsRef = useTemplateRef('queryParamsRef')
const executeFireActionRef = useTemplateRef('executeFireActionRef')
const fireAlertDetailRef = useTemplateRef('fireAlertDetailRef')

onMounted(() => {
    getList();
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表
const getList = async () => {
    loading.value = true;
    const res = await getEmergencyWarningList(queryParams.value, paging.value);
    tableData.value = res.rows;
    total.value = res.total;
    loading.value = false;
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getList()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getList()
}

// 预警不处置
const noDisposingHandle = async (row) => {
    ElMessageBox.confirm(
        '确定是否需要不处置？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await cancelEmergencyWarning({
            warningId: row.warningId,
            state: EarlyWarningEnum.NO_DO
        }).then(async () => {
            await getList()
        })
    }).catch(() => {
    })
}

// 删除预警
const deleteEmergencyHandle = async (data) => {
    await deleteEmergencyAction(data.warningId)
    await getList()
}

const handleDbClick = (row) => {
    fireAlertDetailRef.value.showFireAlertDetail(row.warningId)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>